<template>
    <view class="container" :style="themeVars">
        <view class="theme-picker">
            <button @click="setTheme('light')">浅色主题</button>
            <button @click="setTheme('dark')">深色主题</button>
        </view>
        <view class="content">
            <h1 class="title">主题色换肤示例</h1>
            <view class="color-box"></view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { themes } from '@/utils/themes.js'; // 引入外部主题文件

// 当前主题状态
const currentTheme = ref('light');

// 主题变量响应式对象
const themeVars = ref(themes[currentTheme.value]);

// 切换主题方法
const setTheme = (themeName) => {
    currentTheme.value = themeName;
    themeVars.value = themes[themeName]; // 更新响应式变量
    saveThemeToStorage(themeName);
    triggerUpdate();
};

// 触发视图更新（小程序端特殊处理）
const triggerUpdate = () => {
    // #ifdef MP-WEIXIN
    uni.$emit('themeUpdate', {});
    // #endif
};

// 存储主题到本地
const saveThemeToStorage = (themeName) => {
    uni.setStorageSync('currentTheme', themeName);
};

// 初始化主题
const initTheme = () => {
    const savedTheme = uni.getStorageSync('currentTheme');
    if (savedTheme) {
        currentTheme.value = savedTheme;
        themeVars.value = themes[savedTheme];
    }
    triggerUpdate();
};

initTheme();
</script>

<style lang="scss" scoped>
/* 基础样式 */
.container {
    min-height: 100vh;
    background-color: var(--background-color);
    color: var(--text-color);
    padding: 40rpx;
}

.theme-picker {
    margin-bottom: 40rpx;

    button {
        margin: 0 30rpx;
        padding: 15rpx 50rpx;
        background-color: var(--primary-color);
        color: white;
        border: none;
        border-radius: 10rpx;
        font-size: 32rpx;
    }
}

.content {
    max-width: 600rpx;
    margin: 0 auto;

    .title {
        color: var(--text-primary);
    }
}

.color-box {
    width: 200rpx;
    height: 200rpx;
    background-color: var(--primary-color);
    margin: 50rpx auto;
}
</style>